/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../StatusStripe/mixins';
@import '../Terminal/mixins';

@include StatusStripeWhenDisplayingGuidebook {
  @include StatusStripeElement {
    @include DropdownToggleIcon {
      color: var(--color-base04);
    }
  }
}

body[kui-theme-style] {
  @include BlockOutput {
    .pf-c-dropdown__menu {
      max-height: 15rem;
    }
  }

  @include StatusStripeElement {
    .pf-c-dropdown__menu {
      max-height: 35rem;
      background-color: $bg-type-default;

      .pf-c-dropdown__menu-item {
        &:hover,
        &:focus {
          background-color: $status-stripe-hover-bg-color;
        }
      }
    }
    @include DropdownToggleIcon {
      margin-left: 0.5rem;
      margin-right: 0;
      color: var(--color-text-02);
    }
  }

  .pf-c-dropdown__toggle,
  .pf-c-dropdown__toggle-text {
    font-size: inherit;
    font-family: var(--font-sans-serif);
    color: inherit;
  }

  .pf-c-dropdown__menu {
    max-height: 30rem;
    overflow-y: auto;
    color: var(--color-text-01);
    background-color: var(--color-dropdown);

    .pf-c-dropdown__menu-item {
      color: inherit;
      font-size: inherit;
      font-family: var(--font-sans-serif);

      &:hover,
      &:focus {
        background-color: var(--color-base04);
      }

      svg[data-mode='selected container'] {
        /* need to override some enclosing hover effects from sidecar toolbar */
        fill: currentColor;
        padding: 0px;
      }
    }
  }
}
